<style>
        .collect{color:#ceb90b}
</style>
<template>
<div class="page-content">
    <div class="page-view">
        <div class="market-list">
            <!-- <div style="text-align: center; padding: 0.5rem">
                <div class="f-fl" style="width: 33.33% ; height: 2rem;">
                    <div class="search" >
                        <img src="/static/app/images/bigmirror.png"/>
                        <input placeholder="搜索" style="caret-color: #F0B90B; width: 7rem; font-size: 0.7rem"/>
                    </div>
                </div>
                <div class="f-fl" style="width: 33.33%; height: 2rem; text-align: center">
                    <span>市场</span>
                </div>
                <div class="f-fl" style="width: 33.33%; height: 2rem;"></div>
            </div> -->
            <div>
                <div class="search">
                    <div class="f-fl" >
                        <img src="/static/app/images/bigmirror.png"/>
                        <input placeholder="搜索" style="caret-color: #F0B90B; width: 7rem; font-size: 0.7rem"/>
                    </div>
                    <div>
                        <span>市场</span>
                    </div>
                </div>

            </div>
            <!-- <div class="search" >
                <img src="/app/images/bigmirror.png"/>
                <input style="border: 1px solid #fff; border-radius: 10px" placeholder="搜索" style="caret-color: #F0B90B; width: 100%"/>
            </div> -->
            <!-- <div class="search">
                <img src="/app/images/bigmirror.png"/>
                <input placeholder="搜索" style="caret-color: #F0B90B; width: 9rem; font-size: 0.7rem"/>
            </div> -->
            <div class="btn-tab">
                <span class="button" v-for="item in market_pairs_name" :key="item.market_name" v-bind:class="{'active':select_market==item.market_name}"  v-on:click="sel_market(item.market_name)">{{item.market_name}} </span>
            </div>
            <div class="content" id="products" style="margin-top: 2rem">
                <table class="table">
                    <colgroup style="width: 33.33%"></colgroup>
                    <colgroup style="width: 33.33%"></colgroup>
                    <colgroup style="width: 33.33%"></colgroup>
                    <thead>
                    </thead>
                    <tbody>
                        <tr class="list-title">
                            <th>收藏</th>
                            <th class="f-left">
                                <span v-bind:class="{curcor:sort=='n'}" v-on:click="change_sort('n')">名称 </span><span v-if="sort=='n'" class="curcor"><i class="vl-i font"  v-bind:class="{'font-downdie':order=='asc','font-topzhang':order=='desc'}"></i></span>
                                <!--
                                /
                                <span v-bind:class="{curcor:sort=='v'}" v-on:click="change_sort('v')"> 成交量</span><span v-if="sort=='v'" class="curcor"><i class="vl-i font" v-bind:class="{'font-downdie':order=='asc','font-topzhang':order=='desc'}"></i></span></th>
                            -->
                            <th class="f-left" v-bind:class="{curcor:sort=='p'}" v-on:click="change_sort('p')">最新价<span v-if="sort=='p'" class="curcor"><i class="vl-i font"  v-bind:class="{'font-downdie':order=='asc','font-topzhang':order=='desc'}"></i></span></th>
                            <th class="f-right p-r" v-bind:class="{curcor:sort=='h'}" v-on:click="change_sort('h')">24h涨跌<span v-if="sort=='h'" class="curcor"><i class="vl-i font"  v-bind:class="{'font-downdie':order=='asc','font-topzhang':order=='desc'}"></i></span></th>

                        </tr>
                        <tr class="market-li" v-for="(item, index) in now_data_list" >

                            <!-- <td v-if="item.is_collect" style="text-align: center;"><img class="col_start" :id=`num_${index}` @click.stop="to_collect(index)" style="margin-top: 0.6rem; width: 1.2rem; height: 1.2rem;" src="/app/images/xing2.png" alt=""></td> -->
                            <!-- <td v-else style="text-align: center;"><img class="col_start" :id=`num_${index}` @click.stop="to_collect(index)" style="margin-top: 0.6rem; width: 1.2rem; height: 1.2rem;" src="/app/images/xing.png" alt=""></td> -->
                            <td style="text-align: center;"><i style="font-size: 1rem" class="col_star fa fa-star-o" :class="{collect: item.is_collect}" :id="'num_'+index" @click.stop="to_collect(index)"></i></td>
                            <td v-on:click="on_click_url(item)">
                                <p><span class="firasset">{{item.up_coin_type}}</span><span class="secasset">/ {{item.up_use_coin_type}}</span></p>
                                <p class="volue">成交量 <span>{{item.volume}}</span></p>
                            </td>
                            <td v-on:click="on_click_url(item)"><p class="firasset">{{item.curr}}</p><p class="secasset"><span>￥ {{item.curr}}</span></p></td>
                            <td v-on:click="on_click_url(item)" class="f-right p-r"><span class="Chg"  v-bind:class="[item.percent>0 ?'rise':'fall']">{{item.percent}}</span></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
<div class="app_menu">
    <my-menu></my-menu>
</div>
</div>
</template>



<script>
//@import '/static/app/js/common/common_define.js'
import '@/components/common/menu.js'

var market_pairs_name = [
    {"id":1,"market_name":"自选", 'key':'self'},
    {"id":2,"market_name":"BITCNY", 'key': 'bitcny'},
    {"id":3,"market_name":"BTC", 'key' : 'btc'},
    {"id":4,"market_name":"ETH", 'key' : 'eth'},
    {"id":5,"market_name":"USDT", 'key' : 'usdt'}
    ];

var star_dict = {
  'btc2bitcny': 0,
  'eth2bitcny': 1,
  'ant2bitcny': 0,
  'ltc2bitcny': 1,
  'bch2bitcny': 0
};
export default {
    name: 'market',
    data() {
        return {
            market_pairs_name: market_pairs_name,
            select_market: "BITCNY", //默认分类
            market_group_data: [],      // 根据名称市场类型分组，每组有一个市场对列表
            now_data_list: {},
            start_dict : star_dict,
            sort: "v", //排序方法 n按名称排序 v按成交量排序 p按价格排序 h按24小时涨跌排序
            order: "asc", //asc顺序排序 desc倒序排序
            chg: true,
        }
    },

    created:function () {
        this.get_curr_market()
    },
    methods: {
        sel_market: function(market_name) {
            this.select_market = market_name;
            this.change_data_list(this.select_market);
        },
        // 默认要怎么样呢 ?
        get_curr_market: function () {
        var this_ = this
        $.get('/btc/get_curr_market',{}, (data) => {
                // axios 和 jquery post 不同，data还返回其他的
                if (!data || data.length == 0)
                    return
                //console.log(data)
                this.data_fotmat(data)
                this.change_data_list(this.select_market);
            })
        },
        // 2次遍历
        data_fotmat:function (data){
            var market_list = {}
            for (var i = 0; i < this.market_pairs_name.length; i++) {
                // todo 自选todo添加
                var pack_data = []
                var info = this.market_pairs_name[i]
                var use_coin_type = info.market_name
                for (var ii = 0; ii < data.length; ii++)
                {
                    var item = data[ii]
                    //console.log('packdata', item.use_coin_type, info.key)
                    if (item.use_coin_type == info.key)
                    {
                        // console.log('packdata', item)
                        var open = item.open
                        var curr = item.curr
                        var diff = (curr - open) / 100
                        var percent = diff.toFixed(2)
                        item['percent'] = percent
                        item['up_coin_type'] = item.coin_type.toUpperCase()
                        item['up_use_coin_type'] = item.use_coin_type.toUpperCase()
                        pack_data.push(item)
                    }
                }
                market_list[info.market_name] = pack_data
            }
            this.market_group_data = market_list
        },
        // 加上星号
        change_data_list: function(market_name) {
            // console.log(market_name);
            if (this.market_group_data.length == 0)
                return
            this.now_data_list = this.market_group_data[market_name];
            for (var i = 0; i < this.now_data_list.length; i++) {
                var info = this.now_data_list[i]
                var pair_key = info.coin_type + '2' + info.use_coin_type
                if (star_dict[pair_key]) {
                    info.is_collect = star_dict[pair_key]
                }
            }
            // console.log(this.now_data_list);
        },
        change_sort: function(sort) {
            if (this.sort == sort) {
                if (this.order == "asc") {
                    this.order = "desc";
                } else {
                    this.order = "asc";
                }
                } else {
                    this.order = "asc";
                }
                this.sort = sort;

                //更新排序 待定
            },
            to_coin_detail: function(coin, e) {
                //alert(coin);
                //e.preventDefault();
            },
            on_click_url: function(item) {
                //alert("333");
               // window.location.href = "/m/trade#/trade?symbol=" + item.coin_type + "2" + item.use_coin_type;
               router.push(
                   {
                    path:"/trade/trade/"+item.coin_type +"/" +item.use_coin_type
                   }
                )
            },

            /* 显示交易的列表 */
            show_search: function() {
                layer.open({
                    className: "depositlist",
                    type: 1,
                    content: $("#testbox").html(),
                    anim: "up",
                    style:
                    "background: #12161C;color: #f3f3f3;position:fixed; left:0; top:0; width:100%; height:100%; border: none; -webkit-animation-duration: .5s; animation-duration: .5s;"
                });
            },

            /* 点击收藏 */
            to_collect: function(index) {
                // console.log(123);
                // console.log(index);
                // console.log($(`#num_${index}`));
                /* 添加一个询问弹窗 */
                if(this.now_data_list[index].is_collect){
                    var content = "你确定要删除这个到收藏吗？";
                }else{
                    var content = "你确定要添加这个到收藏吗？";
                }

                var style = 'border:none; background-color:#fff; color:#333; border-radius:0px'
                layer.open({
                    content: content,
                    btn: ['确定', '取消'],
                    style: style,
                    yes: (i) => {
                        this.now_data_list[index].is_collect = !this.now_data_list[index].is_collect;
                        // console.log(this.now_data_list[index].is_collect);
                        $(`#num_${index}`).toggleClass("collect");
                        layer.close(i);
                    }
                });
            }
        }
    }
</script>
